<!--
 * @Author: zcwhy 12345678
 * @Date: 2023-11-02 10:29:51
 * @LastEditors: zcwhy 12345678
 * @LastEditTime: 2023-12-26 15:29:35
 * @FilePath: \xxProject\src\views\map.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="main">
    <van-grid :border="false" :column-num="3">
      <van-grid-item v-for="(item, index) in mapList" :key="index"
        @click="getPlace(item, checkCondition(userInfo.realm, item.condition))">
        <van-image :src="item.url" :class="[!checkCondition(userInfo.realm, item.condition) ? 'make' : '']" />
        <div class="gridName2" v-if="!checkCondition(userInfo.realm, item.condition)">
          {{ getRealmInfo(item.condition) }}
        </div>
        <div class="gridName">{{ item.name }}</div>
      </van-grid-item>
    </van-grid>
    <navBarItem />
  </div>
</template>
<script setup lang="ts">
import navBarItem from '@/components/tabber.vue'
import TestJson from '@/data/map.json'
import { ref, reactive, onMounted, nextTick } from 'vue'
import { getAssetURL, checkCondition, getRealm } from '@/utils/index.ts'
import { useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user'
import { Interface } from 'readline'
const router = useRouter()
const mapList = ref<any[]>([])
const userInfo = ref<any>({})
onMounted(() => {
  userInfo.value = useUserStore().info
  console.log(useUserStore().info)
  let data = TestJson
  let arr = Object.values(data)
  mapList.value = arr.map((item: any, index: number) => {
    console.log(item, index)
    item.url = getAssetURL(`map/${index + 1}.jpg`)
    return item
  }) 
})
const getRealmInfo = (value: any) => {
  const length = value.length
  let i = value.search(/[><\!\?=]/)
  const prop = value.substring(0, i)
  const symbol = value.substring(i, (i += value[i + 1] == '=' ? 2 : 1))
  const d = value.substring(i, length)
  const valueDATA = d[0] == '[' ? JSON.parse(d) : Number(d)
  console.log(valueDATA, 'values')
  return getRealm(valueDATA) + '可探索'
}
const getPlace = (item: object, islook: boolean) => {
  if (islook) {
    router.push({ path: 'place', query: { mapId: item.id, mapName: item.name } })
  }

}
</script>
<style lang="scss" scoped>
.main {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 50px;

  .gridName {
    color: rgb(255, 255, 255);
    z-index: 999;
    position: absolute;
    bottom: 20px;
    height: 25px;
  }

  .gridName2 {
    color: rgb(255, 255, 255);
    z-index: 999;
    position: absolute;
    bottom: 40px;
    height: 25px;
  }

  .make:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 50%);
    opacity: 1;
    transition: opacity 0.5s;
  }
}
</style>
